import React from 'react';
import { MapPin, Phone, Mail } from 'lucide-react';
import { useConfig } from '../context/ConfigContext';
import { useLanguage } from '../context/LanguageContext';

const ContactInfoSection: React.FC = () => {
  const { config } = useConfig();
  const { t } = useLanguage();

  return (
    <div className="grid md:grid-cols-2 gap-12 mt-12">
      <div className="space-y-8 bg-brand-cream p-10 rounded-lg h-full border border-brand-orange/20">
        <div className="flex items-start gap-4">
          <div className="bg-white p-3 rounded-full shadow-sm text-brand-orange">
            <MapPin size={24} />
          </div>
          <div>
            <h4 className="font-bold text-brand-wood mb-1">{t.contact.address}</h4>
            <p className="text-gray-600">{config.address}</p>
          </div>
        </div>

        <div className="flex items-start gap-4">
          <div className="bg-white p-3 rounded-full shadow-sm text-brand-orange">
            <Phone size={24} />
          </div>
          <div>
            <h4 className="font-bold text-brand-wood mb-1">{t.contact.phone}</h4>
            <p className="text-gray-600">{config.phone}</p>
            <p className="text-gray-600">WhatsApp: {config.whatsapp}</p>
          </div>
        </div>

        <div className="flex items-start gap-4">
          <div className="bg-white p-3 rounded-full shadow-sm text-brand-orange">
            <Mail size={24} />
          </div>
          <div>
            <h4 className="font-bold text-brand-wood mb-1">{t.contact.email}</h4>
            <p className="text-gray-600">{config.email}</p>
          </div>
        </div>
      </div>

      <div className="h-[400px] bg-brand-stone/10 rounded-lg overflow-hidden relative shadow-inner border border-brand-wood/10">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.235310636067!2d-74.00392368459458!3d40.73373297932881!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2599696956275%3A0x6b3b555007548773!2sWest%20Village%2C%20New%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1645564856321!5m2!1sen!2s"
          width="100%"
          height="100%"
          style={{ border: 0 }}
          allowFullScreen
          loading="lazy"
          title="Map"
        ></iframe>
      </div>
    </div>
  );
};

export default ContactInfoSection;

